import { useState, useEffect, useContext } from 'react'
import { Form, Button, Input, message, Select, Popconfirm } from 'antd'
import { path, configContext, getLocalValue } from '../../config/env'

function OnChannel() {
  const [nodeData, setNodeData] = useState<any>([])
  const [form, setForm] = useState({
    node_id: '',
    channel_id: '',
    channel_name: '',
    streamsource_addr: '',
    capture_node_id: '',
    cache_node_id: '',
    bitrate: '',
    media_code: '',
    b_hotchannel: '',
    cache_node_id_assign: '',
    edge_node_id_assign: '',
    area_id: ''
  })

  useEffect(() => {
    getData()
  }, [])

  const localValue = useContext(configContext)
  
  const getData = () => {
    setNodeData([])
    fetch(path + '/live_trans_node_info')
    .then((response) => response.json())
    .then((data) => {
      if (data) {
        const value = data.filter((item: { node_type: string }) => {
          return item.node_type == 'NODE_TYPE_LIVE_EDGETRANS'
        })
        setNodeData(value || [])
      }
    })
  }

  const updateFormValue = (e:any, type: string) => {
    setForm({
      ...form,
      [type]: e.target.value
    })
  }
  
  const updateNodeValue = (value:string) => {
    setForm({
      ...form,
      node_id: value
    })
  }

  const updateData = () => {
    if (!form.node_id) {
      message.info(getLocalValue(localValue, '请选择节点ID', 'please select the node ID'))
      return
    }
    fetch(path + '/livecms_live_online',{
      method: 'POST',
      body: JSON.stringify(form)
    })
    .then((response) => response.json())
    .then((data) => {
      if (data) {
        message.success(getLocalValue(localValue, '直播频道上线成功', 'live channel launched successfully'))
      }
    })
  }

  return ( 
     <div className='table-content'>
        <div className='title'>{getLocalValue(localValue, '上线直播频道', 'launch live channel')}</div>
        <div className='table'>
          <Form style={{ maxWidth: 600 }} labelCol={{span: 6}}>
            <Form.Item label={getLocalValue(localValue, '节点ID', 'node ID')} required style={{marginTop: '20px', width: '100%'}}>
              <Select
                showSearch
                placeholder={getLocalValue(localValue, '请选择节点ID', 'please select the node ID')}
                optionFilterProp="label"
                onChange={updateNodeValue}
                options={nodeData.map((item: { node_id: any }) => {return { label: item.node_id, value: item.node_id}})}
              />
            </Form.Item>
            <Form.Item label={getLocalValue(localValue, '频道ID', 'channel ID')} style={{marginTop: '20px', width: '100%'}}>
              <Input style={{width: '100%'}} value={form.channel_id} allowClear onChange={(e) => updateFormValue(e, 'channel_id')} />
            </Form.Item>
            <Form.Item label={getLocalValue(localValue, '频道名称', 'channel name')} style={{marginTop: '20px', width: '100%'}}>
              <Input style={{width: '100%'}} value={form.channel_name} allowClear onChange={(e) => updateFormValue(e, 'channel_name')} />
            </Form.Item>
            <Form.Item label="streamsource_addr" style={{marginTop: '20px', width: '100%'}}>
              <Input style={{width: '100%'}} value={form.streamsource_addr} allowClear onChange={(e) => updateFormValue(e, 'streamsource_addr')} />
            </Form.Item>
            <Form.Item label="capture_node_id" style={{marginTop: '20px', width: '100%'}}>
              <Input style={{width: '100%'}} value={form.capture_node_id} allowClear onChange={(e) => updateFormValue(e, 'capture_node_id')} />
            </Form.Item>
            <Form.Item label="cache_node_id" style={{marginTop: '20px', width: '100%'}}>
              <Input style={{width: '100%'}} value={form.cache_node_id} allowClear onChange={(e) => updateFormValue(e, 'cache_node_id')} />
            </Form.Item>
            <Form.Item label="bitrate" style={{marginTop: '20px', width: '100%'}}>
              <Input style={{width: '100%'}} value={form.bitrate} allowClear onChange={(e) => updateFormValue(e, 'bitrate')} />
            </Form.Item>
            <Form.Item label="media_code" style={{marginTop: '20px', width: '100%'}}>
              <Input style={{width: '100%'}} value={form.media_code} allowClear onChange={(e) => updateFormValue(e, 'media_code')} />
            </Form.Item>
            <Form.Item label="b_hotchannel" style={{marginTop: '20px', width: '100%'}}>
              <Input style={{width: '100%'}} value={form.b_hotchannel} allowClear onChange={(e) => updateFormValue(e, 'b_hotchannel')} />
            </Form.Item>
            <Form.Item label="cache_node_id_assign" style={{marginTop: '20px', width: '100%'}}>
              <Input style={{width: '100%'}} value={form.cache_node_id_assign} allowClear onChange={(e) => updateFormValue(e, 'cache_node_id_assign')} />
            </Form.Item>
            <Form.Item label="edge_node_id_assign" style={{marginTop: '20px', width: '100%'}}>
              <Input style={{width: '100%'}} value={form.edge_node_id_assign} allowClear onChange={(e) => updateFormValue(e, 'edge_node_id_assign')} />
            </Form.Item>
            <Form.Item label="area_id" style={{marginTop: '20px', width: '100%'}}>
              <Input style={{width: '100%'}} value={form.area_id} allowClear onChange={(e) => updateFormValue(e, 'area_id')} />
            </Form.Item>
            <Form.Item wrapperCol={{offset: 6}}>
                <Popconfirm
                  placement="top"
                  title={getLocalValue(localValue, '提示', 'tip')}
                  description={getLocalValue(localValue, '是否确定上线频道?', 'whether to confirm the live channel')}
                  okText={getLocalValue(localValue, '确定', 'ok')}
                  cancelText={getLocalValue(localValue, '取消', 'cancel')}
                  onConfirm={updateData}
                >
                  <Button type="primary">{getLocalValue(localValue, '上线', 'online')}</Button>
                </Popconfirm>
            </Form.Item>
          </Form>
        </div>
     </div>
  );
}

export default OnChannel